<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <meta name="author" content="order by dede58.com"/>
		<title>小米商城</title>
		<link rel="stylesheet" type="text/css" href="./css/style.css">
	</head>
	<body>
	<!-- start header -->
		<header>
			<div class="top center">
				<div class="left fl">
					<ul>
						<li><a href="http://www.mi.com/" target="_blank">小米商城</a></li>
						<li>|</li>
						<li><a href="">MIUI</a></li>
						<li>|</li>
						<li><a href="">米聊</a></li>
						<li>|</li>
						<li><a href="">游戏</a></li>
						<li>|</li>
						<li><a href="">多看阅读</a></li>
						<li>|</li>
						<li><a href="">云服务</a></li>
						<li>|</li>
						<li><a href="">金融</a></li>
						<li>|</li>
						<li><a href="">小米商城移动版</a></li>
						<li>|</li>
						<li><a href="">问题反馈</a></li>
						<li>|</li>
						<li><a href="">Select Region</a></li>
						<div class="clear"></div>
					</ul>
				</div>
				<div class="right fr">
					<div class="gouwuche fr">
						<c:if test="${not empty user}">
							<a href="javascript:void(0)" onclick="toGW()">购物车 <b>${cartNum}</b></a>
						</c:if>
						<c:if test="${empty user}">
							<span onclick="javascript:alert('请先登录')">购物车</span>
						</c:if>
					</div>
					<div class="fr">
				<c:if test="${empty user}">
					<div class="login_btn left fl">
					<a href="login.jsp" style="color:#B0B0B0;">登录</a>
					<span>|</span>
					<a href="register.jsp" style="color:#B0B0B0;">注册</a>
					</div>
				</c:if>
				<c:if test="${not empty user}">
					<span style="color:#B0B0B0; margin-right:10px;">欢迎您：${user.uname}</span>
					<a href="user_center_info.jsp" style="color:#B0B0B0;">个人中心</a>
					</div>
				</c:if>
					<div class="clear"></div>
					</div>
				<div class="clear"></div>
			</div>
		</header>
	<!--end header -->

<!-- start banner_x -->
		<div class="banner_x center">
			<a href="./index.jsp" target="_blank"><div class="logo fl"></div></a>
			<a href="./index.jsp"><div class="ad_top fl"></div></a>
			<div class="nav fl">
				<ul>
					<li><a href="javascript:void(0);" onclick="liebiao(1)">小米手机</a></li>
					<li><a href="javascript:void(0);" onclick="liebiao(2)">红米</a></li>
					<li><a href="javascript:void(0);" onclick="liebiao(3)">笔记本</a></li>
					<li><a href="javascript:void(0);" onclick="liebiao(7)">平板</a></li>
					<li><a href="javascript:void(0);" onclick="liebiao(4)">电视</a></li>
					<li><a href="javascript:void(0);" onclick="liebiao(5)">路由器</a></li>
					<li><a href="javascript:void(0);" onclick="liebiao(6)">智能硬件</a></li>
					<li><a href="">服务</a></li>
					<li><a href="">社区</a></li>
				</ul>
			</div>
			<div class="search fr">
				<form action="" method="post">
					<div class="text fl">
						<input type="text" class="shuru"  placeholder="小米6&nbsp;小米MIX现货" id="contents">
					</div>
					<div class="submit fl">
						<input type="button" class="sousuo" value="搜索" onclick="findSome()"/>
					</div>
					<div class="clear"></div>
				</form>
				<div class="clear"></div>
			</div>
		</div>
<!-- end banner_x -->

	<!-- start banner_y -->
		<div class="banner_y center">
			<div class="nav">				
				<ul>
					<!-- 1代表小米手机 2代表红米手机 -->
					<li id="show" >
						<a href="javascript:void(0);"onclick="liebiao(1)">小米手机</a>
						<a href="javascript:void(0);"onclick="liebiao(2)">红米手机</a>
						<div class="pop" style="width:600px;">
							<!-- 小米手机 -->
							<div class="left fl" id="showPhone">
							</div>
							
							<!-- 红米手机 -->
							<div class="ctn fl" id="showHPhone">
							
							</div>
						</div>
					</li>
					
					<!-- 3代表笔记本 7代表平板 -->
					<li id="showone">
						<a href="javascript:void(0);" onclick="liebiao(3)">笔记本</a>
						<a href="javascript:void(0);" onclick="liebiao(7)">平板</a>
						<div class="pop" style="width:600px;">
							<div class="left fl" id="showCoputer">
													
							</div>	
							
							<!-- 7代表平板 -->				
							<div class="ctn fl" id="showApl">
							
							</div>
						</div>
					</li>
					<li id="showtwo">
						<a href="javascript:void(0);" onclick="liebiao(4)">电视</a>
						<div class="pop" style="width:600px;">
							<div class="left fl" id="showTV">
									
							</div>
						
						
							<div class="right fl" id="showH">
								
							</div>
						</div>
						<div class="clear"></div>
					</li>
					<li id="showthre">
						<a href="javascript:void(0);" onclick="liebiao(5)">路由器</a>
						<a href="javascript:void(0);" onclick="liebiao(6)">智能硬件</a>
						<div class="pop" style="width:600px;">
							<div class="left fl" id="showLu">
								
							</div>
							
							<div class="right fl" id="showZhi">
								
							</div>
							<div class="clear"></div>
						</div>
					</li>
					
					<li id="showdian">
						<a href="javascript:void(0);" onclick="liebiao(11)">移动电源</a>
						<a href="javascript:void(0);" onclick="liebiao(12)">电池-插线板</a>
						<div class="pop" style="width:600px;">
							<div class="left fl" id="showdianyuan">
								
							</div>
							
							<div class="right fl" id="showchaxianban">
								
							</div>
							<div class="clear"></div>
						</div>
					</li>
					<li id="eryin">
						<a href="javascript:void(0);" onclick="liebiao(13)">耳机</a>
						<a href="javascript:void(0);" onclick="liebiao(6)">音箱</a>
						<div class="pop" style="width:600px;">
							<div class="left fl" id="showerji">
								
							</div>
							
							<div class="right fl" id="showyinxiang">
								
							</div>
							<div class="clear"></div>
						</div>
					</li>
					<li id="shownine">
						<a href="javascript:void(0);" onclick="liebiao(9)">保护套</a>
						<a href="javascript:void(0);" onclick="liebiao(8)">贴膜</a>
						<div class="pop" style="width:600px;">
							<div class="left fl" id="showtao">
															
							</div>
							
							<div class="ctn fl" id="showmo">
							
							</div>
							<div class="clear"></div>
						</div>
					</li>
					
					<li id="showten">
						<a href="javascript:void(0);" onclick="liebiao(10)">支架</a>
						<div class="pop" style="width:600px;">
							<div class="left fl" id="showzhi">
										
							</div>
							<div class="ctn fl" id="showz">
										
							</div>
							<div class="clear"></div>
						</div>
					</li>
					<li id='show'>
						<a href="javascript:void(0);" onclick="liebiao(15)">箱包</a>
						<a href="javascript:void(0);" onclick="liebiao(14)">生活</a>
						<div class="pop" style="width:600px;">
							<div class="left fl" id="showxiangbao">
								
							</div>
							<div class="right fl" id="showshenghuo">
								
							</div>
							<div class="clear"></div>
						</div>
					</li>
					<li>
						<a href="">米兔</a>
						<div class="pop" style="width:600px;">
														
							<div class="clear"></div>
						</div>
					</li>
				</ul>
			</div>
		
		</div>	

		<div class="sub_banner center">
			<div class="sidebar fl">
				<div class="fl"><a href=""><img src="./image/hjh_01.gif"></a></div>
				<div class="fl"><a href=""><img src="./image/hjh_02.gif"></a></div>
				<div class="fl"><a href=""><img src="./image/hjh_03.gif"></a></div>
				<div class="fl"><a href=""><img src="./image/hjh_04.gif"></a></div>
				<div class="fl"><a href=""><img src="./image/hjh_05.gif"></a></div>
				<div class="fl"><a href=""><img src="./image/hjh_06.gif"></a></div>
				<div class="clear"></div>
			</div>
			<div class="datu fl"><a href=""><img src="./image/hongmi4x.png" alt=""></a></div>
			<div class="datu fl"><a href=""><img src="./image/xiaomi5.jpg" alt=""></a></div>
			<div class="datu fr"><a href=""><img src="./image/pinghengche.jpg" alt=""></a></div>
			<div class="clear"></div>


		</div>
	<!-- end banner -->
	<div class="tlinks">Collect from <a href="http://www.cssmoban.com/" >企业网站模板</a></div>

	<!-- start danpin -->
		<div class="danpin center">
			
			<div class="biaoti center">小米明星单品</div>
			<div class="main center" id="famous">
				
				
				<div class="clear"></div>
			</div>
		</div>
		<div class="peijian w">
			<div class="biaoti center">热门配件</div>
			<div class="main center">
				<div class="content" id="showUp">
					
				</div>
				
				<div class="content" >
						<span id="showDown">
							
						</span>
				
					<div class="remenlast fr">
						
						<div class="hongmi">
							<a href="javascript:void(0);" onclick="toXQ(37)">
								<img src="./image/浏览更多上面.png">
							</a>
						</div>
						<div class="liulangengduo">
							<a href="javascript:void(0);" onclick="liebiao(9)">
								<img src="./image/liulangengduo.png">
							</a>
						</div>					
					</div>
					<div class="clear"></div>
				</div>				
			</div>
		</div>
		<footer class="mt20 center">			
			<div class="mt20">小米商城|MIUI|米聊|多看书城|小米路由器|视频电话|小米天猫店|小米淘宝直营店|小米网盟|小米移动|隐私政策|Select Region</div>
			<div>?mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div> 
			<div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>
		</footer>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script>
	
		//小米单品的显示   使用sql语句随机从表中查询五条数据
		//一进入index界面就要加载进来
		$.post("goodServlet",{
			op:"findGoodByRand"
		},function(data){
			var str="";
			if(data.length>0){
				for(var i=0;i<data.length;i++){
					str+='<div class="mingxing fl"><div class="sub_mingxing">';
					str+='<a href="javascript:void(0);" onclick="toXQ('+data[i].gid+')">';
					str+='<img src="./'+data[i].pic+'"></a></div><div class="pinpai">';
					str+='<a href="javascript:void(0);" onclick="toXQ('+data[i].gid+')">'+data[i].tname+'</a></div>';
					str+='<div class="youhui">更轻更薄，像杂志一样随身携带</div>';
					str+='<div class="jiage">'+data[i].price+'元起</div></div>';
				}
			}
			$("#famous").html(str);
		},"json");
		
		//热门配件的封装
		function PeiJian(op,id){
			$.post("goodServlet",{
				op:op
			},function(data){
				var str='';
				if(data.length>0){
					for(var i=0;i<data.length;i++){
						str+='<div class="remen fl"><div class="xinpin"><span style="background:#fff">';
						str+='</span></div><div class="tu"><a href="javascript:void(0);" onclick="toXQ('+data[i].gid+')">';
						str+='<img src="./'+data[i].pic+'" style="height:150px; width:150px;"></a></div>';
						str+='<div class="miaoshu"><a href="javascript:void(0);" onclick="toXQ('+data[i].gid+')">'+data[i].tname+'</a></div>';
						str+='<div class="jiage">'+data[i].price+'元</div></div>';
					}
					$("#"+id).html(str);
				}
				
			},"json");
		}
		
		//热门配件的显示   使用sql语句随机从表中查询5条数据  上面一行只展示手机壳和手机膜
		//一进入index界面就要加载进来
		PeiJian("findPeiJian","showUp");
		
		//热门配件的显示   使用sql语句随机从表中查询5条数据  下面面一行只展示手机壳和手机膜
		//一进入index界面就要加载进来
		PeiJian("findPeiJianD","showDown");
		

		//根据tid跳转列表页面进行查询这个类别的所有商品
		function liebiao(tid){
			var tid=parseInt(tid);
			$.post("goodServlet",{
				op:"findTypeByTid",
				tid:tid
			},function(data){
				if(data>0){
					location.href="liebiao.jsp";
				}
			},"text");
		}
		//将鼠标移入到每个不同的li时  都有不一样的参数传入  进行判断参数的传入
		//发ajax请求查询小米手机和红米手机
		$("#show").one('mouseover',function(){
			 	var tid1=1;
				var tid2=2;
				var one='showPhone';
				var two='showHPhone';
				showAjax(tid1,tid2,one,two);
        });
		//发ajax请求查询笔记本和平板
		$("#showone").one('mouseover',function(){
			 	var tid1=3;
				var tid2=7;
				var one='showCoputer';
				var two='showApl';
				showAjax(tid1,tid2,one,two);
        });
		//发ajax请求查询电视
		$("#showtwo").one('mouseover',function(){
			 	var tid1=4;
				var tid2=20;
				var one='showTV';
				var two='showH';
				showAjax(tid1,tid2,one,two);
        });
		//发ajax请求查询路由器和智能硬件
		$("#showthre").one('mouseover',function(){
			 	var tid1=5;
				var tid2=6;
				var one='showLu';
				var two='showZhi';
				showAjax(tid1,tid2,one,two);
        });
		//发ajax请求查询手机套和手机膜
		$("#shownine").one('mouseover',function(){
			 	var tid1=9;
				var tid2=8; 
				var one='showtao';
				var two='showmo';
				showAjax(tid1,tid2,one,two);
        });
		//发ajax请求查询支架
		$("#showten").one('mouseover',function(){
			 	var tid1=10;
				var tid2=20; 
				var one='showzhi';
				var two='showz';
				showAjax(tid1,tid2,one,two);
        });
		
		//发ajax请求查询移动电源 电池充电线
		$("#showdian").one('mouseover',function(){
			 	var tid1=11;
				var tid2=12;   
				var one='showdianyuan';
				var two='showchaxianban';
				showAjax(tid1,tid2,one,two);
        });
		//发ajax请求查询移动电源 电池充电线
		$("#eryin").one('mouseover',function(){
			 	var tid1=13;
				var tid2=6;   
				var one='showerji';
				var two='showyinxiang';
				showAjax(tid1,tid2,one,two);
        });
		   
		//发ajax请求查询移动电源 电池充电线
		$("#show").one('mouseover',function(){
			 	var tid1=15;
				var tid2=14;   
				var one='showxiangbao';
				var two='showshenghuo';
				showAjax(tid1,tid2,one,two);
        });
		//封装发ajax请求的方法
		function showAjax(tid1,tid2,one,two){
			$.post("goodServlet",{
				op:"findGoodsByTid",
				tid1:tid1,
				tid2:tid2
			},function(data){
				var str1='';
				var str2='';
				var count=0;
				if(data.length>0){
					for(var i=0;i<data.length;i++){
						if(data[i].tid==tid1 && count<6){
							str1+='<div><div class="xuangou_left fl">'; 
							str1+='<a href="javascript:void(0);" onclick="toXQ('+data[i].gid+')" ><div class="img fl"><img src="./'+data[i].pic+'" style="width:40px; height:40px;"></div>';
							str1+='<span class="fl">'+data[i].tname+'</span><div class="clear"></div>';
							str1+='</a></div><div class="xuangou_right fr"  ><a href="javascript:void(0);" onclick="toXQ('+data[i].gid+')">选购</a></div>';
							str1+='<div class="clear"></div></div>';
							count++;
						}else if(data[i].tid==tid2){
							str2+='<div><div class="xuangou_left fl">';
							str2+='<a href="javascript:void(0);" onclick="toXQ('+data[i].gid+')"><div class="img fl"><img src="./'+data[i].pic+'" style="width:40px; height:40px;"></div>';
							str2+='<span class="fl">'+data[i].tname+'</span><div class="clear"></div>';
							str2+='</a></div><div class="xuangou_right fr" ><a href="javascript:void(0);" onclick="toXQ('+data[i].gid+')">选购</a></div>';
							str2+='<div class="clear"></div></div>';
						}
					}
					$("#"+one).html(str1);
					$("#"+two).html(str2);
				}
			},"json");
		}
		
		
		//查询某个商品的详情   发ajax请求发送成功  则跳转详情页面  并进行显示
		function toXQ(gid){
			var gid=parseInt(gid);
			$.post("goodServlet",{
				op:"findGoodsByGid",
				gid:gid
			},function(data){
				if(data>0){
					location.href="xiangqing.jsp";
				}
			},"text");
		}
		
		//跳转至购物车界面  显示购物车信息
		function toGW(){
			$.post("cartinfoServlet",{
				op:"findCart"
			},function(data){
				if(data>0){
					//如果成功跳转购物车界面然后显示信息
					location.href="gouwuche.jsp";
				}else{
					alert("网络异常。。。。");
				}
			},"text");
		}
		
		//搜索的点击事件  进行模糊查询   跳转至liebiao.jsp页面
		function findSome(){
			var content=$("#contents").val();
			$.post("goodServlet",{
				op:'findSome',
				str:content
			},function(data){
				if(data>0){
					location.href="liebiao.jsp";
				}else{
					alert("此搜索暂无结果");
				}
			},"text");
		}
</script>
		
	</body>
</html>